<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AceHub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../Homepage/css/header.css">
    <link rel="stylesheet" href="../header-footer/common.css">
    <link rel="stylesheet" href="student-profile.css">
</head>
<body>
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="../Homepage/courseList.html">course</a></li>
                    <li><a href="../Homepage/league.html">Alliance colleges</a></li>
                    <li><a href="../Homepage/about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>
    <!-- 主体 -->
    <div class="student-profile-header">
        <div class="student-profile-head">
            <img id="avatar" src="images/user-head.jpg" alt="用户头像">
            <div class="student-profile-info">
                <h2 id="user-name">user name</h2>
                <!-- <p id="signature">Signature: This is my signature.</p> -->
            </div>
        </div>
    </div>
    <div class="student-profile-body">
       <div class="sidebar" id="sidebar">
            
            <a class="sidebar-item" href="#courses">My courses</a>
            <a class="sidebar-item" href="#tasks">learning tasks</a>
            <!-- <a class="sidebar-item" href="#notes">Study Notes</a> -->
            <a class="sidebar-item" href="#collects">My Collection</a>
            <!-- <a class="sidebar-item" href="#mistakes">My wrong question</a> -->
            <a class="sidebar-item" href="#talks">My discussion</a>
            <a class="sidebar-item" href="#quizzes">My test</a>  <!-- 新增这一行 -->
            <button class="sidebar-toggle-btn" id="toggleSidebar">retract</button>
        </div>
        <div class="content">
            <!-- 我的课程 -->
            <div id="courses">
                <div class="tabs">
                    <a id="registered" class="tabs-item" href="#courses/registered">Registered courses</a>
                </div>
                <div class="tabs-content">
                </div>
            </div>
            <!-- 学习任务 -->
            <div id="tasks">
                <div class="tabs">
                    <!-- <a id="document" class="tabs-item" href="#tasks/document">View courseware</a> -->
                    <a id="homework" class="tabs-item" href="#tasks/homework">Pending homework submission</a>
                    <a id="finished-homework" class="tabs-item" href="#tasks/finished-homework">Submitted homework</a>
                </div>
                <div class="tabs-content">
            
                </div>
            </div>
            <!-- 学习笔记 -->
            <div id="notes">
                <div class="tabs">
                    <a id="mynotes" class="tabs-item" href="#notes/mynotes">MY notes</a>
                </div>
                <div class="tabs-content">

                </div>
            </div>
            <!-- 我的收藏 -->
            <div id="collects">
                <div class="tabs">
                    <a id="collects-courses" class="tabs-item" href="#collects/collects-courses">Collect courses</a>
                </div>
                <div class="tabs-content">
                    <div class="message collects-courses">
                        <p class="message">Currently, there are no collections available</p>
                    </div>
                </div>
            </div>
            <!-- 我的错题 -->
            <div id="mistakes">
                <div class="tabs">
                    <a id="mymistakes" class="tabs-item" href="#mistakes/mymistakes">My wrong question</a>
                </div>
                <div class="tabs-content">
                    <div class="message mymistakes">
                        
                        <p class="message">There are currently no incorrect questions</p>
                    </div>
                </div>
            </div>
            <!-- 我的讨论 -->
            <div id="talks">
                <div class="tabs">
                    <a id="mytalks" class="tabs-item" href="#talks/mytalks">My discussion</a>
                </div>
                <div class="tabs-content">

                </div>
            </div>
            <!-- 新增“我的测验”内容区 -->
              <div id="quizzes">
                    <div class="tabs">
                        <a id="myquizzes" class="tabs-item" href="#quizzes/myquizzes">My test</a>
                    </div>
                    <div class="tabs-content">
                        <div class="quiz-item">
                            
                              <div>
                            
                                <p>Advanced Mathematics Test</p>
                            </div>
                            <button id="startQuizBtn" onclick="startQuiz('highMath')">Start the test</button>
                        </div>
                    </div>
                </div>


        </div>
    </div>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="../Homepage/about.html">About Us</a></li>
                        <li><a href="../Homepage/contact.html">Contact Us</a></li>
                        <li><a href="../Homepage/privacy.html">Privacy Policy</a></li>
                        <li><a href="../Homepage/terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>
    <!--收起按钮-->
     <script>
        document.getElementById('toggleSidebar').addEventListener('click', () => {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('collapsed');
        });
    </script>
    <script src="../database.js"></script>
    <script src="../account/account.js"></script>
    <script src="student-profile-database.js"></script>

    <!--页眉js-->
    <script>
        //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../account/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
    <!--设置访问权限,只有学生可以登录该页面-->
    <script>
        // if(!localStorage.getItem('token')) {
//Please log in first! ');
//     window.location.href = '../account/login.html';
// }
// if(localStorage.getItem('token') === 'teacher' || localStorage.getItem('token') === 'admin') {
//You do not have access to this page! ');
//     window.location.href = '../account/login.html';
// }
    </script>
    <script>
        let userid = localStorage.getItem('token');
let user = JSON.parse(localStorage.getItem(userid));
document.getElementById('avatar').src = user.avatar;
document.getElementById('user-name').innerText = user.username;
//If the signature is empty, display 'Signature not set yet'
if(user.signature === '') {
Document. getElementById ('signature '). inlerText=' Signature not set yet ';
}
else {
Document. getElementById ('signature '). innerText=' Signature: '+user.signature;
}
    </script>
    <!-- 现代化交互JavaScript -->
    <script>
        // 页面加载完成后执行初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializePageInteractions();
        });

        // 初始化页面交互功能
        function initializePageInteractions() {
            // 设置侧边栏导航
            setupSidebarNavigation();
            
            // 设置标签页切换
            setupTabNavigation();
            
            // 默认显示第一个内容区域
            showSidebarContent('courses');
            
            // 添加页面滚动效果
            addScrollEffects();
            
            // 添加搜索功能
            setupSearchFunctionality();
        }

        // 设置侧边栏导航
        function setupSidebarNavigation() {
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            
            sidebarItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有active类
                    sidebarItems.forEach(si => si.classList.remove('active'));
                    
                    // 添加active类到当前点击的项
                    this.classList.add('active');
                    
                    // 获取目标内容区域ID
                    const targetId = this.getAttribute('href').substring(1);
                    
                    // 显示对应内容
                    showSidebarContent(targetId);
                    
                    // 添加点击动画效果
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 150);
                });
            });
        }

        // 设置标签页导航
        function setupTabNavigation() {
            const tabsItems = document.querySelectorAll('.tabs-item');
            
            tabsItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 获取父级tabs容器
                    const tabsContainer = this.closest('.tabs');
                    const tabsItems = tabsContainer.querySelectorAll('.tabs-item');
                    
                    // 移除所有active类
                    tabsItems.forEach(ti => ti.classList.remove('active'));
                    
                    // 添加active类到当前点击的项
                    this.classList.add('active');
                    
                    // 获取目标内容ID
                    const href = this.getAttribute('href');
                    const targetId = href.split('/')[1];
                    
                    // 显示对应的标签页内容
                    showTabContent(targetId);
                    
                    // 添加点击动画效果
                    this.style.transform = 'translateY(-2px)';
                    setTimeout(() => {
                        this.style.transform = 'translateY(0)';
                    }, 200);
                });
            });
        }

        // 显示侧边栏内容
        function showSidebarContent(contentId) {
            // 隐藏所有内容区域
            const contentSections = document.querySelectorAll('.content > div');
            contentSections.forEach(section => {
                section.style.display = 'none';
                section.classList.remove('fade-in');
            });
            
            // 显示目标内容区域
            const targetContent = document.getElementById(contentId);
            if (targetContent) {
                targetContent.style.display = 'block';
                
                // 添加淡入动画
                setTimeout(() => {
                    targetContent.classList.add('fade-in');
                }, 50);
                
                // 激活第一个标签页
                const firstTab = targetContent.querySelector('.tabs-item');
                if (firstTab) {
                    // 移除所有active类
                    const allTabs = targetContent.querySelectorAll('.tabs-item');
                    allTabs.forEach(tab => tab.classList.remove('active'));
                    
                    // 激活第一个标签页
                    firstTab.classList.add('active');
                    
                    // 显示对应内容
                    const href = firstTab.getAttribute('href');
                    const tabContentId = href.split('/')[1];
                    showTabContent(tabContentId);
                }
            }
        }

        // 添加滚动效果
        function addScrollEffects() {
            // 监听滚动事件，为卡片添加视差效果
            window.addEventListener('scroll', function() {
                const scrollY = window.scrollY;
                const cards = document.querySelectorAll('.registered, .courseware, .homework, .mynotes, .mytalks');
                
                cards.forEach((card, index) => {
                    const rect = card.getBoundingClientRect();
                    const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
                    
                    if (isVisible) {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }
                });
            });
            
            // 初始化卡片动画
            const cards = document.querySelectorAll('.registered, .courseware, .homework, .mynotes, .mytalks');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'all 0.6s ease';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        }

        // 设置搜索功能
        function setupSearchFunctionality() {
            const searchInput = document.getElementById('searchInput');
            const searchButton = document.getElementById('searchButton');
            
            // 搜索按钮点击事件
            if (searchButton) {
                searchButton.addEventListener('click', function() {
                    performSearch();
                });
            }
            
            // 搜索输入框回车事件
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        performSearch();
                    }
                });
            }
        }

        // 执行搜索
        function performSearch() {
            const searchInput = document.getElementById('searchInput');
            const query = searchInput ? searchInput.value.trim() : '';
            
            if (!query) {
                showNotification('请输入搜索关键词', 'warning');
                return;
            }
            
            // 这里可以添加具体的搜索逻辑
            console.log('搜索关键词:', query);
            showNotification(`正在搜索: ${query}`, 'info');
        }

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = 'notification ' + type;
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 12px 20px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 1000;
                animation: slideInRight 0.3s ease;
                max-width: 300px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            `;
            
            // 设置不同类型的颜色
            switch(type) {
                case 'success':
                    notification.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
                    break;
                case 'warning':
                    notification.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
                    break;
                case 'error':
                    notification.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
                    break;
                default:
                    notification.style.background = 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)';
            }
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 3秒后自动移除
            setTimeout(() => {
                notification.style.animation = 'slideOutRight 0.3s ease';
                setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 300);
}, 3000);
}
//Add CSS animation
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.fade-in {
animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*Smooth scrolling*/
html {
scroll-behavior: smooth;
}
/*Load animation*/
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0
left: -100%;
}
100% {
left: 100%;
}
}
`;
document.head.appendChild(style);
    </script>
<script>
    // 页面加载时检查测验完成状态
    window.addEventListener('DOMContentLoaded', () => {
const quizKey = 'quiz_highMath_completed';
const completed = localStorage.getItem(quizKey);
const btn = document.getElementById('startQuizBtn');
if (completed === 'true') {
Btn.innerText='Completed';
btn.disabled = true;
btn.style.cursor = 'not-allowed';
}
});
//Click to start the test
function startQuiz(quizId) {
//Save Status
const quizKey = 'quiz_' + quizId + '_completed';
localStorage.setItem(quizKey, 'true');
//Jump page
window.location.href = '../Homepage/exam.html';
}
</script>
    
</body>
</html>